vue 笔记
<div id="root"> <div> <input v-model="inputValue" /> <button @click="onAdd">submit</button> </div> <ul> <todo-item v-for="(item, index) of list" :key="index" :content="item" :ind...
2024-01-10
vue ui
做完上一篇的工作，即vue -V可以正常运行之后，我们使用vue ui指令，会发现报以下错误：Error: spawn cmd ENOENT Emitted ‘error’ event on ChildProcess instance at: errno: ‘ENOENT’, code: ‘ENOENT’, syscall: ‘spawn cmd’, path: ‘cmd’, spawnargs: [ ‘/c’, ‘start’, ‘""’, ‘/b’, ‘http://localhost:8000’ ]解...
2024-01-10
vue 指令
核心思想：数据驱动视图MVVM声明式指令一、条件渲染1、v-if<div v-if="type=='A'"> A</div><div v-else-if="type=='B'"> B</div><div v-else-if="type=='C'"> C</div><div v-else> other</div>scriptvar app = new Vue({ el: '#app', data: { name: "tom", age: 24, ...
2024-01-10
vue 语法
模板语法<!-- 文本 使用 {{...}} --><div > <p>{{ message }}</p></div><!-- 使用 v-html 指令用于输出 html 代码： --><div > <div v-html="message"></div></div><!-- HTML 属性中的值应使用 v-bind 指令 --><div > <div v-bind:class="{'class1': use}"> v-bind:class 指令 </div></div><!-- Vue....
2024-01-10
vue 入门
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue.js入门</title> </head> <script src="js/vue.js"></script> <body> <div class="box"> {{title}}<br> <!--双向数据绑定--> <input type="text...
2024-01-10
vue 01
1.有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box { height:100px; width:100px; } </style></head><body><div...
2024-01-10
vue 动画
点击按钮 文字 向左右飘动 显示隐藏<template> <div > <button @click="flag= !flag">按钮</button> <transition> <div v-show="this.flag">我要动起来</div> </transition> </div></template><script>export default { data() { return { flag: true }; }};</script>...
2024-01-10
vue 笔记一
vue: 读音: v-u-e view vue到底是什么? 一个mvvm框架(库)、和angular类似 比较容易上手、小巧 mvc: mvp mvvm mv* mvx 官网:http://cn.vuejs.org/ 手册： http://cn.vuejs.org/api/vue和angular区别? vue——简单、易学 指令以 v-xxx 一片html代码配合上json，在new出来vue实例 个人维护项目 适合: 移动端项目,小巧 vue的发展势头...
2024-01-10
vue引入d3
单页面使用cnpm install d3 --save-dev指定版本安装cnpm install d3@6.3.1 -S<script> import * as d3 from 'd3'export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { testD3(){ let test1 = d3.select...
2024-01-10
vue 列表渲染
在Vue官网中写道，vue无法直接用索引设置元素，如 vm.items[0] = {}；提出的解决方法是用 ：example1.items.$set(0, { childMsg: 'Changed!'})；但是发现，如果用了这个方法之后，再使用vm.items[i]={};是有作用的。同样vue中无法通过将数组长度制为0来让数组为空，只能使用this.items.$remove(item)；此时去直接赋值是有...
2024-01-10
vue 葵花宝典
vue2.js 下载地址：https://unpkg.com/vue@2.2.1/dist/vue.jsvue-router.js 下载地址：https://unpkg.com/vue-router@3.5.3/dist/vue-router.js es6：https://es6.ruanyifeng.com/#docs/let 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ti...
2024-01-10
vue 表单操作
<form class="mian__form" @submit.prevent="submit"> <ul> <li> <div class="form__til">企业名称</div> <div class="form__inp...
2024-01-10
vue 入门小结
Vue.js 是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层。1、引入方式：直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 初学者可以使用script标签 的方式引入，开发的时候是不使用的。最好在</head>之前引入，为了防止出现抖屏...
2024-01-10
vue 介绍的拓展
计算属性<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: f...
2024-01-10
vue 国际化配置
第一步： 创建lang文件夹 index.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import Cookies from 'js-cookie'import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui langimport elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element...
2024-01-10
vue 表单问题。
<template> <form> <span v-for="item in list"> <input type="text" :value="'U' + item"> <button @click="list++"></button> </span> <button @click="getArray()">Upnow</button>...
2024-02-13
vue的特点 关键字
1.对mvvm模式的理解Model-view-viewmodelModel数据模型View代表ui组件Viewmodel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步view和model的对象，连接model和view 2.Vue的生命周期BeforecreateCreatedBeforemount载入前MountedBeforeupdateUpdatedBeforedestroyDestroyedDOM渲染在mounted中就完成了 3.实...
2024-01-10
vue 第三方图标库
"font-awesome": "^4.7.0", "dependencies": { "axios": "^0.18.0", "element-ui": "^2.4.11", "font-awesome": "^4.7.0", "js-cookie": "^2.2.0", "vue": "^2.5.2", "vue-i18n": "^8.7.0", "vue-router": "^3.0.1" },main.js中引入import 'font-awesome/...
2024-01-10
36个vue开发技巧
前 言 Vue 3.x 的Pre-Alpha 版本。后面还有 Alpha、Beta 等版本,要等到之后才有可能发布 3.0 新版， 所以应该趁还没出来加紧打好 Vue2.x 的基础。 Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了36个vue开发技巧，后续Vue 3.x出来后持续更新。 require.context() 场景:如页...
2024-01-10
vue样式绑定 切换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Vue中样式绑定</title> </head> <body> <div id="app"> <div @click="handleDivClick" :class="{activa...
2024-01-10
vue 左右滑动效果
个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架，与其它大型框架不同的是：vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层，不仅易于上...
2024-01-10
vue 图片滑动登录
前言 最近在研究图片滑动解锁 登录，说是要用阿里的那个验证，但是还是想自己手写下这个Demo 效果图是这样的： 本来是想用canvas 来实现的，但是类，后来还想用css 和图片来代替canvas其实思路就这样的： 那个缺陷的滑块位置 是随机的 根据 图片的宽高 产生 随机 数当然是定位 ： left...
2024-01-10
vue 渲染括号问题?
想要在渲染的时候添加括号 类似于(wr)......应该如何操作回答：难道不是<a-select-option>({{item.evalue}}){{item.value}}</a-select-option>就可以吗回答：你上面的字符串拼接应该可以呀:label="`(${item.eValue})`"也可以 slot 里面<a>{{ `(${item.eValue})` }}</a>你显示...
2024-03-04
vue 错误提问示例
> 表格显示数据，选中其中一条数据进行编辑，弹出层编辑，发现修改数据时，表格中的数据同步变化。编辑成功之后，还会返回原本没修改之前的数据。> 传对象给子组件，子组件的值污染父组件。...
2024-01-10
